<template>
  <div class="mainGarbage">
    <div class="moneyToPay">
      <div class="title">
        <div class="backIcon">
          <BackToPage :pageAddr="pageTo"></BackToPage>
        </div>
        <span>垃圾费</span>
      </div>
      <div class="mainMoney">
        <div class="left">
          <div class="datetime">
            <div is-link @click="showPopup">
              {{ year }}年{{ month }}月
              <i class="el-icon-arrow-down"></i>
            </div>
          </div>
          <div class="money">{{ money }}￥</div>
          <div class="address">{{ liveAddress }}</div>
        </div>
        <div class="right"></div>
      </div>
    </div>
    <div class="itemTitle">支出图表</div>
    <div id="chartMain" class="chartGarbage"></div>
    <div class="itemTitle">支出账单</div>
    <div class="garbageBill">
      <template>
        <ListItem :list="billList" />
      </template>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="getDateValue($event)"
      />
    </van-popup>
  </div>
</template>

<script>
import ListItem from "../components/ListItem";
import BackToPage from "../components/BackToPage";

export default {
  name: "Garbage",
  props: {},
  components: {
    ListItem,
    BackToPage,
  },
  data() {
    return {
      year: 2021,
      month: 5,
      money: 12,
      liveAddress: "金凤路18号",
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      show: false,
      pageTo: "/community",
      billList: [
        {
          title: "2月垃圾费",
          money: 12,
        },
        {
          title: "3月垃圾费",
          money: 8,
        },
        {
          title: "4月垃圾费",
          money: 9,
        },
      ],
    };
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      var myChart = this.$echarts.init(document.getElementById("chartMain"));
      var option;

      option = {
        color: ["#87c9a5"],
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [12, 15, 9, 20, 11, 12],
            type: "bar",
          },
        ],
      };
      myChart.setOption(option);
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    },
    showPopup() {
      this.show = true;
    },
    getDateValue(value) {
      this.show = false;
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      this.year = year;
      this.month = month;
    },
  },
};
</script>
<style lang="scss" >
body {
  background-color: #f6f7f7;
}
.mainGarbage {
  width: 375px;
  margin: 0;
}
.moneyToPay {
  height: 220px;
  background-color: #64b587;
  color: white;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  margin-bottom: 20px;
  .title {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    .backIcon {
      flex: 0.6;
      margin-left: 20px;
    }
    span {
      flex: 1;
    }
  }
  .mainMoney {
    width: 100%;
    display: flex;
    .left {
      width: 40%;
      .datetime {
        font-size: 16px;
        font-weight: 600;
        width: 100%;
        margin-left: 20px;
      }
      .money {
        font-size: 40px;
        font-weight: 1000;
        width: 100%;
        margin-left: 18px;
        margin-top: 10px;
      }
      .address {
        font-size: 14px;
        margin-left: 20px;
        margin-top: 15px;
      }
    }
    .right {
      width: 60%;
      background-image: url("../assets/money.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}
.chartGarbage {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemTitle {
  margin-left: 20px;
  font-size: 14px;
  font-weight: 800;
  color: rgb(146, 146, 146);
}
.garbageBill {
  margin: 20px 20px 0px 20px;
}
</style>